<template>
  <div>
    数1: <input type="text" v-model.number="fname" /> 数2:<input
      type="text"
      v-model.number="lname"
    />
    <h1>
      两数的和：
      {{ fullname }}
      {{ fullname }}
      {{ fullname }}
      {{ fullname }}
      {{ fullname }}
      {{ methsum() }} {{ methsum() }} {{ methsum() }} {{ methsum() }}
    </h1>
    <hr />
    <input type="text" v-model="msg" />
    <h2>{{ reverseMsg }}</h2>
    <hr />
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <h3>{{ total }}</h3>
  </div>
</template>

<script>
//总结一下computed和methods的区别?
//methods:只要当前组件的任何数据有更新，methods肯定要执行
//computed:就算当前组件的数据有更新，如果当前计算属性依赖的值没有更新，不会重新计算
// ·计算属性: 可以缓存
//计算一次之后，结果会缓存起来，下一次用到的时候，直接使用缓存的结果(而不是重新计算)//什么时候会重新计算: 计算属性依赖的值发生变化的时候，会重新计算
export default {
  data() {
    return {
      fname: '',
      lname: '',
      msg: '',
      arr: [2, 3, 5, 6, 3, 6, 8, 3, 8],
    }
  },
  computed: {
    total() {
      return this.arr.reduce((prev, item) => {
        return prev + item
      }, 0)
    },
    fullname() {
      console.log('计算属性')
      return this.fname + this.lname
    },
    reverseMsg() {
      return this.msg.split('').reverse().join('')
    },
  },
  methods: {
    methsum() {
      console.log('methods属性')
      return this.fname + this.lname
    },
  },
}
</script>

<style></style>
